<template>
	<view class="page">
		<view class="popup">
			<u-popup :show="show" mode="center" @close="close" @open="open">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="table">
						<uni-table :stripe="false" :emptyText="$t('common.noData')" ref="table">
							<!-- 表头行 -->
							<uni-tr style="background: #E8E8E8;">
								<uni-th width="100px" align="center">{{ $t('pages.quality.type') }}</uni-th>
								<uni-th width="100px" align="center">{{ $t('pages.quality.content') }}</uni-th>
								<uni-th width="100px" align="center">{{ $t('pages.quality.pieces') }}</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(spotItem, index) in defectiveSpotList" :key="spotItem.id">
								<uni-td align="center">{{ $t('pages.quality.defects') }}</uni-td>
								<uni-td align="center">{{ spotItem.defectiveSpot }}</uni-td>
								<uni-td align="center">{{ spotItem.questionNum }}</uni-td>
							</uni-tr>
							<uni-tr v-for="(processItem, index) in processesList" :key="processItem.id">
								<uni-td align="center">{{ $t('pages.quality.probProcess') }}</uni-td>
								<uni-td align="center">{{ processItem.processName }}</uni-td>
								<uni-td align="center">{{ processItem.questionNum }}</uni-td>
							</uni-tr>
						</uni-table>
						<!-- <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view> -->
						<view class="footer">
							<view class="handle">
								<u-button @click="close">{{ $t('common.return') }}</u-button>
							</view>
						</view>
					</view>
				</scroll-view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	export default {
		props: {
			defectiveSpotList: {
				type: Array
			},
			processesList: {
				type: Array
			}
		},
		data() {
			return {
				selectData: '',
				selectedIndexs: '',
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				show: false,
				formData: {
					keyword: '',
				},
				queryParams: {
					keyword: '',
				},
				tableList: [],
			};
		},
		onShow() {},
		mounted() {
		},
		methods: {
			close() {
				this.show = false
			},
			open() {
				this.show = true
			},
			backTo() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-form {
		font-size: 1rem;
		margin-left: 2%;
	}

	.u-form-item {
		width: 40%;
	}

	/deep/ .u-form-item__body__left {
		width: 20%;
	}

	/deep/ .u-form-item__body__left__content__label {
		font-size: 1.2rem;
	}

	.popup {
		.scroll-Y {
			min-height: 60%;
		}
		/deep/ .u-popup__content {
			width: 40%;
			height: 60%;
		}
		/deep/ .u-input__content__field-wrapper__field {
			font-size: 1rem!important;
		}
	}

	.table {
		// margin-top: 2%;

		/deep/ .uni-table-th-content {
			font-size: 1rem;
		}

		.uni-table-td {
			font-size: 1rem;
		}

		/deep/ .u-tabs__wrapper__nav__item__text {
			font-size: 1.2rem;
		}
	}

	.footer {
		position: fixed;
		width: 40%;
		min-height: 10%;
		display: flex;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
		bottom: 10%;

		.handle {
			width: 30%;
			display: flex;
			position: absolute;
			right: 2%;

			button {
				width: 225.141rpx;
				height: 82.552rpx;
				margin: 0 5%;
			}
		}
	}
</style>
